/* eslint-disable no-console */
import { ThemeUtils } from './theme-utils.js';

export class ThemeManager {

    constructor() {
        this.downloadAnchor = null;
    }

    static defaultThemes = ['DefaultDark', 'DefaultLight'];

    /**
    * 获取指定分类和名称的主题
    * @param {string} category - 分类名 (system/user)
    * @param {string} themeName - 主题名称
    * @returns {object | null} 主题数据
    */
    static getTheme(category, themeName) {
        try {
            const themes = JSON.parse(localStorage.getItem('Themes')) || {};
            return themes[category]?.[themeName] || null;
        } catch (error) {
            console.error(`获取[${category}]分类下的主题[${themeName}]失败:`, error);
            return null;
        }
    }

    /**
     * 获取默认主题
     * @param {boolean} darkMode - 是否为深色模式
     * @returns {string} 默认主题名称
     */
    static getDefaultTheme(darkMode) {
        return darkMode? this.defaultThemes[0] : this.defaultThemes[1];
    }

    /**
     * 应用主题
     * @param {string} themeName - 主题名称
     * @param {boolean} force - 是否强制应用主题
     */
    static applyTheme(themeName, force = false){
        let theme = ThemeManager.getTheme('system', themeName) || ThemeManager.getTheme('user', themeName)

        if (!theme && !force) {
            themeName = this.getDefaultTheme(window.darkMode);
            // 如果没有找到指定的主题，尝试获取系统主题
            theme = ThemeManager.getTheme('system', themeName);
            // 更新当前主题
            window.AppUtils.updateLocalStorage('userSettings', {'currentTheme': themeName});
        }

        if (!theme) {
            throw new Error(`未找到主题信息: ${themeName}`);
        }

        Object.entries(theme).forEach(([key, value]) => {
            // 更新颜色选择器
            ThemeUtils.toggleColor(key, value);
            // 更新元素样式
            ThemeUtils.setElementStyles(key, value);
        });
        return themeName;
    }

    /**
     * 添加表格行（带合并功能）
     * @param {number} index 序号
     * @param {object} theme 主题对象
     * @param {string} key 样式键名
     * @param {string} type 样式类型
     * @param {string} value 样式值
     * @param {object} titles 标题映射
     * @param {number} themeRowspan 主题名称行跨度
     * @param {number} typeRowspan 主题类型行跨度
     */
    static addTableRow(index, theme, key, type, value, titles, themeRowspan, typeRowspan) {
        const $ = window.jQuery;
        const chineseName = titles[key] || '-';
        const isColor = value.startsWith('#');

        // 创建行元素
        const $row = $('<tr>');

        // 添加序号
        $row.append($('<td>').text(index));

        // 添加主题名称（根据rowspan决定是否合并）
        if (themeRowspan > 0) {
            $row.append(
                $('<td>')
                    .attr('rowspan', themeRowspan)
                    .text(theme.name)
            );
        }

        // 添加主题类型（根据rowspan决定是否合并）
        if (typeRowspan > 0) {
            $row.append(
                $('<td>')
                    .attr('rowspan', typeRowspan)
                    .append(
                        $('<span>')
                            .addClass('badge')
                            .addClass(theme.type === 'light' ? 'badge-light' : 'badge-dark')
                            .text(theme.type)
                    )
            );
        }

        // 添加其余列
        $row.append(
            $('<td>').text(key),
            $('<td>').text(chineseName),
            $('<td>').text(type),
            $('<td>').text(value),
            $('<td>')
                .css({
                    'background-color': isColor ? value : 'transparent',
                    'color': type === 'text' ? value : '',
                    'border': type === 'border' ? `2px solid ${value}` : ''
                })
                .text(isColor ? '' : value)
        );

        return $row;
    }

    /**
     * 处理主题调色板数据
     * @param {object} theme - 主题对象
     * @returns {object} 处理后的主题数据
     */
    static processThemePalette(theme) {
        const processed = {};
        const { palette } = theme;

        // 处理背景色
        if (palette.backgrounds) {
            Object.entries(palette.backgrounds).forEach(([key, value]) => {
                processed[`${key}BgColor`] = value;
            });
        }

        // 处理文字颜色
        if (palette.text) {
            Object.entries(palette.text).forEach(([key, value]) => {
                processed[`${key}TextColor`] = value;
            });
        }

        // 处理边框颜色
        if (palette.border) {
            Object.entries(palette.border).forEach(([key, value]) => {
                processed[`${key}Border`] = value;
            });
        }

        return processed;
    }

    /**
     * 创建主题导出的锚点
     */
    initThemeDownloadAnchor() {
        // 提前创建隐藏的<a>元素
        this.downloadAnchor = document.createElement('a');
        window.jQuery(this.downloadAnchor).attr({ // 避免下载时出现白屏问题
            'id': 'downloadAnchor',
            'target': '_blank',
            'rel': 'noopener noreferrer'
        });
        this.downloadAnchor.style.display = 'none';
        document.body.appendChild(this.downloadAnchor);

        // 页面卸载时清理
        window.addEventListener('beforeunload', () => {
            if (this.downloadAnchor.href) {
                URL.revokeObjectURL(this.downloadAnchor.href);
            }
            document.body.removeChild(this.downloadAnchor);
        });
    }

    /**
     * 更新用户中心-风格-主题列表下拉框选项
     */
    setUiThemeOptions() {
        try {
            const themes = JSON.parse(localStorage.getItem('Themes'));
            const currentTheme = window.AppUtils.getUserSettings()?.currentTheme || '';
            const $select = window.jQuery('#uiTheme');

            // 获取当前已有的选项值
            const existingOptions = () => {
                return new Set($select.find('option').map((i, opt) => opt.value).get()
            )};

            Object.values(themes).forEach((item) => {
                Object.keys(item).forEach((name) => {
                    // 检查是否已经存在该选项值，如果存在则跳过添加
                    if (existingOptions().has(name)) return;

                    // 创建新option元素
                    const $option = window.jQuery(`<option value="${name}">${name}</option>`);

                    // 如果是当前主题则设为选中
                    if (name === currentTheme) {
                        $option.prop('selected', true);
                    }

                    $select.append($option);
                })
            });
            // 确保当前主题被选中（即使已存在）
            if (currentTheme && existingOptions().has(currentTheme)) {
                $select.val(currentTheme);
            }
        }
        catch (error) {
            console.error('设置主题选项失败:', error);
        }
    }

    /**
     * 获取系统主题
     */
    dealColorThemeTable() {
        const $ = window.jQuery;
        const $tableBody = $('#new-site-table-body');

        const handleElement = () => {
            $tableBody.addClass('table-empty').html('<tr><td colspan="8" class="text-center">暂无数据</td></tr>');
        }

        $('#color-theme-modal').addClass('loading');
        fetch('/color-theme.json')
            .then(response => response.json())
            .then(data => {

                let rowIndex = 1;

                // 先计算每个主题的行数
                const themeRowCounts = data.themes.map(theme => {
                    return (theme.palette.backgrounds && Object.keys(theme.palette.backgrounds).length || 0) +
                        (theme.palette.text && Object.keys(theme.palette.text).length || 0) +
                        (theme.palette.border && Object.keys(theme.palette.border).length || 0);
                });

                const themesCount = data.themes.length;
                // 插入前先清空表格
                $tableBody.empty();
                if (themesCount === 0) {
                    handleElement();
                    return;
                }
                // 使用文档片段批量添加行，减少 DOM 操作次数优化性能
                const $fragment = $(document.createDocumentFragment());
                // 遍历所有主题
                data.themes.forEach((theme, themeIndex) => {
                    const totalRows = themeRowCounts[themeIndex];
                    let currentRow = 0;

                    // 处理背景色
                    theme.palette.backgrounds && Object.entries(theme.palette.backgrounds).forEach(([key, value]) => {
                        const $row = ThemeManager.addTableRow(rowIndex++, theme, key, 'backgrounds', value, data.title,
                            currentRow === 0 ? totalRows : 0,
                            currentRow === 0 ? totalRows : 0
                        );
                        currentRow++;
                        $fragment.append($row);
                    });

                    // 处理文字颜色
                    theme.palette.text && Object.entries(theme.palette.text).forEach(([key, value]) => {
                        const $row = ThemeManager.addTableRow(rowIndex++, theme, key, 'text', value, data.title,
                            currentRow === 0 ? totalRows : 0,
                            currentRow === 0 ? totalRows : 0
                        );
                        currentRow++;
                        $fragment.append($row);
                    });

                    // 处理边框颜色
                    theme.palette.border && Object.entries(theme.palette.border).forEach(([key, value]) => {
                        const $row = ThemeManager.addTableRow(rowIndex++, theme, key, 'border', value, data.title,
                            currentRow === 0 ? totalRows : 0,
                            currentRow === 0 ? totalRows : 0
                        );
                        currentRow++;
                        $fragment.append($row);
                    });
                });
                $('#theme-table-body').append($fragment);
            })
            .catch(error => {
                console.error('[module] 系统主题配色获取失败:', error);
                handleElement();
            }).finally(() => $('#color-theme-modal').removeClass('loading'));
    }

    /**
     * 应用用户设置的主题
     */
    applyUserTheme(){
        let currentTheme;
        try {
            currentTheme =  JSON.parse(localStorage.getItem('userSettings'))?.currentTheme;
            const themeName = ThemeManager.applyTheme(currentTheme);
            if (currentTheme !== themeName) {
                console.debug(`[systemInfo] 用户主题'${currentTheme}'未找到，使用默认主题: ${themeName}`);
            } else {
                console.debug(`[systemInfo] 用户主题已生效: ${themeName}`);
            }
        } catch (error) {
            console.error(`[systemInfo] 用户主题'${currentTheme}'未生效: ${error}`);
        }
    }

    /**
     * 初始化系统主题
     */
    initSystemTheme() {
        fetch('/color-theme.json')
            .then(response => response.json())
            .then(async data => {
                const themeData = {};
                // 1. 遍历所有主题
                data.themes.forEach((theme) => themeData[theme.id] = ThemeManager.processThemePalette(theme));

                // 2. 保存系统主题到 localStorage 中
                window.AppUtils.updateLocalStorage('Themes', {system: themeData});
                // console.debug('[module] [theme] 系统主题初始化完成');

                // 3. 更新主题列表选项
                this.setUiThemeOptions();

                // 4. 应用用户设置的主题
                this.applyUserTheme();
            }).catch(error => {
                console.error('[module] [theme] 系统主题初始化失败:', error);
            });
    }
}

(function ($) {
    const themeManager = new ThemeManager();

    /**
     * 查看主题配置
     */
    $('#view-color-theme').on('click', () => {
        // 调整主题
        $('#color-theme-modal table.color-theme')
            .removeClass('table-dark table-light')
            .addClass(window.getDarkMode() === 'dark' ? 'table-dark' : 'table-light');
        const $tableBody = $('#theme-table-body');
        const hasEmptyClass = $tableBody.hasClass('table-empty');
        // 加载主题配置
        hasEmptyClass === true && themeManager.dealColorThemeTable();
    })

    /**
     * 导出主题配置
     */
    themeManager.initThemeDownloadAnchor();
    $('#export-color-theme').on('click', async () => {
        window.setModalAccessibilityState(true); // 禁用模态框
        // 本地数据获取
        const getLocalTheme = () => {
            try {
                const saved = JSON.parse(localStorage.getItem('Themes'));
                if (!saved || !saved.user) {
                    // console.debug('[module] [theme] 本地未存储主题配置，使用空数据');
                    return {};
                }
                // console.debug('[module] [theme] 成功加载本地主题:', saved.user);
                return saved.user;
            } catch (e) {
                console.error('[module] [theme] 解析本地主题失败:', e);
                return {};
            }
        };

        // 显示加载状态（带超时提示）
        const EXPORT_TIMEOUT = 10000; // 10秒超时
        await window.ToastManager.alert({
            title: '⏳ 正在导出，请耐心等待...',
            html: `
                <div class="spinner-border text-info" role="status"></div>
                <div class="mt-2 text-muted small">
                    最长等待时间: ${EXPORT_TIMEOUT / 1000}秒，超时后会自动关闭
                </div>
            `,
            timer: EXPORT_TIMEOUT,
            showConfirmButton: false,
            allowOutsideClick: false,
            didOpen: async () => {
                try {
                    // 1. 获取数据
                    const exportData = getLocalTheme() || {};

                    // 2. 空数据提示
                    if (Object.keys(exportData).length === 0) {
                        await window.ToastManager.alert({
                            icon: 'warning',
                            title: '导出失败',
                            text: '未自定义任何主题',
                        });
                        return;
                    }

                    // 3. 创建Blob对象
                    const blob = new Blob([JSON.stringify(exportData, null, 2)], {
                        type: 'application/json;charset=utf-8'
                    });

                    // 4. 重用已创建的<a>元素
                    themeManager.downloadAnchor.href = URL.createObjectURL(blob);
                    themeManager.downloadAnchor.download = `oneNavColorTheme-${window.AppUtils.formatDateTime(new Date(), window.AppUtils.DATE_FORMATS.DATE)}.json`;
                    themeManager.downloadAnchor.click(); // 触发下载

                    // 5. 延迟清理（重要）
                    setTimeout(() => {
                        URL.revokeObjectURL(themeManager.downloadAnchor.href);
                    }, 100);

                    // 6. 显示成功提示
                    await window.ToastManager.alert({
                        icon: 'success',
                        title: '导出成功',
                        text: '开始下载主题配置',
                    });
                } catch (error) {
                    console.error('导出失败:', error);
                    await window.ToastManager.alert({
                        icon: 'error',
                        title: ' 导出失败',
                        text: `${error.message}，具体错误请查看控制台日志`,
                        timer: 5000,
                        confirmButtonText: '我知道了',
                    });
                } finally {
                    window.setModalAccessibilityState(false); // 启用模态框
                }
            }
        });
    });

    /**
     * 验证主题名称数组是否合法
     * @param {string[]} themeNames - 待验证的主题名称数组
     */
    function validateThemeNames(themeNames) {
        // 允许的主题名称集合
        const ALLOWED_THEMES = new Set(['MyLight', 'MyDark']);

        // 验证长度不超过2
        if (themeNames.length > 2) {
            throw new Error('主题数量不能超过2个');
        }

        // 验证主题名称不重复
        const uniqueThemeNames = new Set(themeNames);
        if (uniqueThemeNames.size !== themeNames.length) {
            throw new Error('主题名称不能重复');
        }

        // 验证所有主题名称合法
        const hasInvalidTheme = themeNames.some(theme => !ALLOWED_THEMES.has(theme));
        if (hasInvalidTheme) {
            throw new Error('只允许使用 MyLight 和 MyDark 主题名称');
        }
    }

    /**
     * 导入主题配置
     */
    $('#import-color-theme').on('change', (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = async (event) => {
            window.setModalAccessibilityState(true); // 禁用模态框
            try {
                // 解析文件内容
                const importedData = JSON.parse(event.target.result);

                // 验证数据格式
                if (!importedData || importedData.length === 0) {
                    await window.ToastManager.alert({
                        icon: 'error',
                        title: '导入失败',
                        text: '文件内容为空',
                    });
                }

                // 合并到本地存储（保留原有非冲突主题）
                const currentThemes = JSON.parse(localStorage.getItem('Themes')) || {};
                const systemThemes = currentThemes.system || {};
                const firstThemeName = Object.keys(systemThemes)[0]; // 第一个主题名称
                const firstThemeKeys = firstThemeName ? Object.keys(systemThemes[firstThemeName]) : [];

                // 过滤无效主题
                const themeNames = Object.keys(importedData);
                validateThemeNames(themeNames);

                const validTheme = Object.entries(importedData).filter(([theme, data]) =>{
                    // 检查项目名称是否符合要求
                    const themeKeys = Object.keys(data)
                    if (firstThemeKeys.length !== themeKeys.length) {
                        throw new Error(`主题'${theme}'的配置项数量与系统主题不匹配`);
                    }
                    if (!firstThemeKeys.every(item => themeKeys.includes(item))) {
                        throw new Error(`主题'${theme}'的配置项与系统主题不匹配`);
                    }

                    // 检查颜色值是否符合要求
                    Object.entries(data).forEach(([key, value]) => {
                        if (key.endsWith('BgColor') || key.endsWith('TextColor')) {
                                if (!value || !/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(value)) {
                                throw new Error(`主题'${theme}'的颜色值无效：${key}（${value}）`);
                            }
                        }
                    });
                    return true;
                });
                if (validTheme.length === 0) {
                    await window.ToastManager.alert({
                        icon: 'error',
                        title: '导入失败',
                        text: '没有有效的主题数据',
                    });
                    return;
                }

                // 获取新增的主题
                const existingIds = currentThemes.user ? Object.keys(currentThemes.user).map(t => t) : [];
                const newThemes = validTheme.filter(([theme]) =>
                    !existingIds.includes(theme)
                );

                // 合并主题数据
                const updatedThemes = {
                    system: {...currentThemes.system},
                    user: {...currentThemes.user, ...importedData},
                };

                // 保存到localStorage
                localStorage.setItem('Themes', JSON.stringify(updatedThemes));

                let logDesc;
                const updateThemesCount = Math.max(validTheme.length - newThemes.length, 0);
                if (newThemes.length === 0) {
                    logDesc = `🎉 更新 ${validTheme.length} 个主题`;
                } else if (updateThemesCount > 0) {
                    logDesc = `🎉 新增 ${newThemes.length} 个主题，更新 ${updateThemesCount} 个主题`;
                } else {
                    logDesc = `🎉 新增 ${newThemes.length} 个主题`;
                }

                await window.ToastManager.alert({
                    icon: 'success',
                    title: '导入成功',
                    text: logDesc,
                });

                // 新增主题时，更新主题列表选项
                newThemes.length > 0 && themeManager.setUiThemeOptions();
            } catch (error) {
                console.error('导入失败:', error);
                await window.ToastManager.alert({
                    icon: 'error',
                    title: ' 导入失败',
                    text: `${error.message}`,
                });
            } finally {
                // 重置 input 允许重复导入相同文件
                e.target.value = '';
                window.setModalAccessibilityState(false); // 激活模态框
            }
        };
        reader.readAsText(file);
    });

    /**
     * 监听仅应用点击事件
     */
    $('#page-color #apply-theme').on('click', async () => {
        window.setModalAccessibilityState(true); // 禁用模态框
        const currentTheme = $('#uiTheme').val();
        // 更新当前主题
        window.AppUtils.updateLocalStorage('userSettings', {'currentTheme': currentTheme});
        // 提示用户
        await window.ToastManager.alert({
            icon: 'success',
            title: '主题已生效',
            text: `当前主题【${currentTheme}】，页面将刷新...`,
        }).then(() => {
            // 刷新页面
            window.location.reload();
        });
        window.setModalAccessibilityState(false); // 激活模态框
    })

    /**
     * 监听应用并保存点击事件
     */
    $('#page-color #save-settings').on('click', async () => {
        try {
            window.setModalAccessibilityState(true); // 禁用模态框
            await window.ToastManager.confirm({
                icon: 'info',
                title:'选择你需要覆盖的用户主题',
                html: `
                    <div class="d-flex justify-content-center align-items-center">
                        <select
                            name="userTheme"
                            id="userTheme"
                            class="form-select"
                        >
                            <option value="MyLight">
                                MyLight
                            </option>
                            <option value="MyDark">
                                MyDark
                            </option>
                        </select>
                    </div>
                `,
                preConfirm: () => {
                    return {
                        userTheme: $('#userTheme').val(),
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const userTheme = result.value.userTheme;
                    // 保存用户主题
                    Object.keys(window.colorConfigs).forEach(name => {
                        ThemeUtils.updateColorToLocalStorage(userTheme, name);
                    });
                    // 更新当前主题
                    window.AppUtils.updateLocalStorage('userSettings', {'currentTheme': userTheme});
                    // 更新主题列表选项
                    themeManager.setUiThemeOptions();
                    // 提示用户
                    window.ToastManager.alert({
                        icon: 'success',
                        title: '主题配色已生效',
                        text: `🎉 开始享受你的新主题【${userTheme}】吧！`,
                    });
                }
            })
        } finally {
            window.setModalAccessibilityState(false); // 启用模态框
        }
    })

    /**
     * 监听主题列表变化事件
     */
    $('#uiTheme').on('change', function (){
        ThemeManager.applyTheme($(this).val());
    })

    /**
    * 初始化主题
    */
    function initTheme() {
        themeManager.initSystemTheme();
        themeManager.dealColorThemeTable();
    }

    window.initTheme = initTheme
})(window.jQuery);